<template>
  <div class="app-container">
    <el-row>
      <el-col :span="8">
        <el-row>
          <el-form :model="form" ref="formRef" label-width="130px">
            <el-form-item label="箱ID">
              <el-input v-model="form.boxId" @input="boxIdChange"></el-input>
            </el-form-item>
            <el-form-item label="入库单号">
              <el-input v-model="form.orderNo" placeholder="自动生成"></el-input>
            </el-form-item>
            <el-form-item label="关联单号">
              <el-input v-model="form.saleNo"></el-input>
            </el-form-item>
            <el-form-item label="客户料号">
              <el-input v-model="form.materialNo"></el-input>
            </el-form-item>
            <el-form-item label="机种">
              <el-input v-model="form.model"></el-input>
            </el-form-item>
            <el-form-item label="批次号">
              <el-input v-model="form.batchNo"></el-input>
            </el-form-item>
            <el-form-item label="产品等级">
              <el-select v-model="form.productGrade" v-on:change="changeProductGrade">
                <el-option v-for="item in options.productGrade" :key="item.dictValue" :label="item.dictLabel" :value="item.dictLabel"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="储位">
              <el-input v-model="form.storage"></el-input>
            </el-form-item>
            <el-form-item label="数量">
              <el-input v-model="form.total" readonly></el-input>
            </el-form-item>
          </el-form>
        </el-row>
        <el-row>
          <div style="width: 410px">
            <el-alert :type="retOpt" show-icon :closable="false" :title="titleName" :description="retMessage"></el-alert>
          </div>
        </el-row>
      </el-col>
      <el-col :span="16">
        <el-row>
          <el-button type="primary" :loading="loading" :disabled="reciveDisabled" @click="reciveSubmit">回传客户</el-button>
          <el-button type="primary" :loading="loading" :disabled="inDbDisabled" @click="submitForm">退料</el-button>
        </el-row>
        <el-row style="margin-top: 20px">
          <el-table v-loading="loading" :data="storeDataList" border height="620">
            <el-table-column prop="productrequestname" label="工单号" align="center" width="140" v-if="columns.showColumn('productrequestname')" />
            <el-table-column prop="processgroupname" label="内箱号" align="center" v-if="columns.showColumn('processgroupname')" />
            <el-table-column prop="productspecname" label="FGCODE" align="center" v-if="columns.showColumn('productspecname')" />
            <el-table-column prop="ocid" label="产品Id" align="center" v-if="columns.showColumn('ocid')" />
            <el-table-column prop="lotno" label="批次号" align="center" width="110" v-if="columns.showColumn('lotno')" />
            <el-table-column prop="packingtime" label="包装时间" align="center" v-if="columns.showColumn('packingtime')" />
          </el-table>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="productbad">
import { querylist, add, recive } from '@/api/storein/product'
import _ from 'lodash'
const { proxy } = getCurrentInstance()
const columns = ref([
  { visible: true, align: 'center', type: '', prop: 'processgroupname', label: '内箱号' },
  { visible: true, align: 'center', type: '', prop: 'ocid', label: '产品Id' },
  { visible: true, align: 'center', type: '', prop: 'productrequestname', label: 'FGCODE' },
  { visible: true, align: 'center', type: '', prop: 'productspecname', label: '工单号' },
  { visible: true, align: 'center', type: '', prop: 'lotno', label: '批次号' },
  { visible: true, align: 'center', type: '', prop: 'packingtime', label: '包装时间' }
])
const formRef = ref()
const state = reactive({
  form: {
    productGrade: 'K',
    storage: '9911'
  },
  storeDataList: [],
  inDbDisabled: true,
  reciveDisabled: true,
  infoMsg: false,
  retInfo: {},
  titleName: '提示',
  retOpt: 'info', //info//success//error
  retMessage: '',
  loading: false,
  options: {
    productGrade: []
  }
})

const { form, storeDataList, inDbDisabled, reciveDisabled, options, retOpt, titleName, retMessage, loading } = toRefs(state)

var dictParams = ['product_grade']
proxy.getDicts(dictParams).then((response) => {
  response.data.forEach((element) => {
    //state.options[element.dictType] = element.list
    state.options['productGrade'] = element.list
  })
})
/** boxid变更事件 */
const boxIdChange = _.debounce(() => {
  reciveDisabled.value = true
  inDbDisabled.value = true
  if (form.value.boxId) {
    querylist({ ...form.value }).then((res) => {
      storeDataList.value = res.data.data
      retMessage.value = res.data.message
      form.value.orderNo = res.data.orderNo
      if (res.data.storeinBoxProductDetail != null) {
        form.value.materialNo = res.data.storeinBoxProductDetail.materialNo
        form.value.model = res.data.storeinBoxProductDetail.model
        form.value.batchNo = res.data.storeinBoxProductDetail.batchNo
        form.value.saleNo = res.data.saleNo
      }
      if (res.data.data != null) {
        form.value.total = res.data.data.length
      }
      showButton(res.data)
    })
  }
}, 500)
// const orderNoChange = _.debounce(() => {
//   if (form.value.orderNo && form.value.saleNo == null) {
//     querymain({ orderNo: form.value.orderNo }).then((res) => {
//       if (res.data != null) {
//         form.value.materialNo = res.data.materialNo
//         form.value.productGrade = res.data.productGrade
//         form.value.storage = res.data.storage
//         form.value.model = res.data.model
//       }
//     })
//   }
// }, 500)
function changeProductGrade(e) {
  if (e == 'A') {
    form.value.storage = '9916'
  } else {
    form.value.storage = '9911'
  }
}
function showButton(data) {
  if (data.state == 1) {
    retOpt.value = 'info'
    titleName.value = '提示'
  } else if (data.state == 0) {
    retOpt.value = 'success'
    titleName.value = '成功'
    retMessage.value = '箱ID：' + form.value.boxId + '已出货，已回传客户。'
  } else {
    retOpt.value = 'error'
    titleName.value = '错误'
  }
  if (data.addbtn == 3) {
    reciveDisabled.value = true
    inDbDisabled.value = true
  } else if (data.passbackFlag == 0) {
    reciveDisabled.value = false
    inDbDisabled.value = true
  } else if (data.addbtn == 0) {
    reciveDisabled.value = false
    inDbDisabled.value = true
  } else {
    reciveDisabled.value = true
    inDbDisabled.value = false
  }
}

function submitForm() {
  loading.value = true
  add({ ...form.value })
    .then((res) => {
      showButton(res.data)
      retMessage.value = res.data.message
      form.value.orderNo = res.data.orderNo
      loading.value = false
    })
    .finally((res) => {
      retMessage.value = res.data
      loading.value = false
    })
}
function reciveSubmit() {
  loading.value = true
  recive({ ...form.value })
    .then((res) => {
      showButton(res.data)
      retMessage.value = res.data.message
      form.value.orderNo = res.data.orderNo
      loading.value = false
    })
    .finally((res) => {
      retMessage.value = res.data
      loading.value = false
    })
}
</script>